<template>
	<!-- 退款完成界面 -->
	<view class="refundFinish">

		<!-- 顶部 -->
		<view class="rf-titlenav">
			<uni-steps :options="orderInfo.Refunds_type == 1 ? list2 : list3" class="steps" active-color="#ff557d" :active="active" />
		</view>
		<!-- 	<view class="tips" v-if="active != 0">
			<text v-if="active == 0" style="color: red;">商家拒绝了您的申请，您可以修改退款申请后再次发起</text>
			<text v-if="active == 1" style="color: #51b0f8;">卖家已经同意了您的退款申请，退款申请达成</text>
			<text v-if="active == 2" style="color: #51b0f8;">您的退款已经完成，请注意查收您的账户余额</text>
		</view> 我就把组件放上去，我都不知道怎么用返回的状态控制它变化 -->
		<view class="od-line3" style="margin-top: 40upx;padding: 0 15upx;">
			<view class="content-line1">
				<image :src="orderInfo.shop_img" mode="" class="order-icon" style="margin-right: 10upx;"></image>
				<text class="line1-text2 font30">{{orderInfo.shop_name}}</text>
				<text class="iconfont">&#xe600;</text>
				<text class="order-status">售后</text>
			</view>
			<view class="content-line2">
				<view class="line1-text1">
					<image :src="orderInfo.pro_img" mode=""></image>
				</view>
				<view class="line1-text2 font28">
					<view class="content-title">
						{{orderInfo.pro_name}}
					</view>
					<view class="price">
						<text class="font30">
							￥{{orderInfo.or_price}}
						</text>
						</br>
						<text class="font24">
							×{{orderInfo.or_pronum}}
						</text>
					</view>
					<view class="order-number">
						订单号:{{orderInfo.orid}}
					</view>
				</view>
			</view>
			<view class="content-line3">
				<view class="line3-r">
					<text class="font24 ">
						共{{orderInfo.or_pronum}}件商品
					</text>
					<text class="font24 padding13">
						合计：
					</text>
					<text class="font30 money">
						￥{{orderInfo.or_amount}}
					</text>
				</view>
			</view>
		</view>

		<!-- 退款信息 -->
		<view class="rf-info">
			<view class="info-item">
				<text>退款总金额</text>
				<text>￥{{orderInfo.or_amount}}</text>
			</view>
			<view class="info-item">
				<text>钱款去向</text>
				<text>支付账户</text>
			</view>
			<view class="info-item">
				<text>申请时间</text>
				<text>{{orderInfo.Refunds_time}}</text>
			</view>
		</view>
		
		<!-- 说明 -->
		<view class="remark">
			<view class="remark-item">
				<text>{{remark}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	export default {
		components: {
			uniSteps
		},
		data() {
			return {
				remark:'',
				statusTips: '退款中',
				active: 0,
				orderInfo: {},
				list2: [{
						title: '已申请',
						isSuccess: true
					},
					{
						title: '申请成功',
						isSuccess: true
					},
					{
						title: '退款到账',
						isSuccess: true
					},
				],
				list3: [{
						title: '已申请',
						isSuccess: true
					},
					{
						title: '退货确认中',
						isSuccess: true
					},
					{
						title: '确认成功',
						isSuccess: true
					},
					{
						title: '退款到账',
						isSuccess: true
					}
				]
			};
		},
		onLoad(id) {
			let Id = JSON.parse(id.id)
			this.evaluation(Id)
		},
		methods: {
			async evaluation(Id) {
				let title = "售后"
				let res = await this.$http.getAfterSaleDetils({
					refunds_id: Id
				});
				this.orderInfo = res.data
				if (this.orderInfo.Refunds_type == 1) {
					title = "仅退款"
					switch (res.data.Refunds_status) {
						case 0:
							this.active = 0
							this.remark = "已申请，请耐心等待卖家审核！"
							break;//已申请
						case 1:
							this.active = 2
							this.remark = "您的退款已经完成，请查收您的账户余额！"
							break;//已退款
						case 3:
							this.active = 1
							this.list2[1].title = '已拒绝'
							this.list2[1].isSuccess = false
							this.remark = "卖家已拒接您的退款请求，如有疑问请尽快与商家联系！"
							break; //已拒绝
						default:
							break;
					}
				} else {
					title = "退货退款"
					switch (res.data.Refunds_status) {
						case 0:
							this.active = 0
							this.remark = "已申请，请耐心等待卖家审核！"
							break;//已申请
						case 1:
							this.active = 3
							this.remark = "您的退货退款已经完成，请查收您的账户余额！"
							break;//已退款
						case 3:
							this.active = 1
							this.list3[1].title = '已拒绝'
							this.list3[1].isSuccess = false
							this.remark = "卖家已拒接您的退货退款请求，如有疑问请尽快与商家联系！"
							break; //已拒绝
						case 4:
							this.active = 2
							this.remark = "卖家已收到您的退货商品，同意您的退货退款请求，钱款已原路退回您的账户，请注意查收！"
							break;//已同意
						case 5:
							this.active = 2
							this.list3[2].title = '拒接退货'
							this.list3[2].isSuccess = false
							this.remark = "卖家已拒接您的退货退款请求，如有疑问请尽快与商家联系！"
							break;//拒绝退货
						default:
							break;
					}
				}
				
				uni.setNavigationBarTitle({
					title: title
				});
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#FF557D',
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	@import 'static/css/user-order.scss';
	@import 'static/css/refund.scss';

	.rf-titlenav {
		margin-top: 40upx;

		.steps {
			font-size: 40upx;
		}
	}

	.rf-info {
		width: 95%;
		height: 204upx;
		margin: 20upx auto;
		background-color: #FFFFFF;
		border-radius: 10upx;

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 68upx;
			line-height: 68upx;
			border-bottom: 1px solid #f3f3f3;
			padding-left: 24upx;
			padding-right: 24upx;
			font-size: 26upx;

			&>text:last-child {
				color: #999999;
			}
		}
	}
	.remark{
		width: 95%;
		margin: 20upx auto;
		background-color: #FFFFFF;
		border-radius: 10upx;
		box-shadow: 10upx 10upx 10upx #fae8ed;
		display: flex;
		align-items: center;
		justify-content: center;
		.remark-item{
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 20upx;
			font-size: 24upx;
			color: #ff557d;
		}
	}
</style>
